<template>
	<view class='container'>
		<swiper :indicator-dots="false" :circular="true" :autoplay="true" :interval="3500" :duration="500"
			style='height:300upx;'>
			<swiper-item v-for="item in innerImages" :key="item">
				<image :src="item" mode="scaleToFill" style='height:100%;width:100%;'></image>
			</swiper-item>
		</swiper>
		<view class="title" v-if="innerTitle">
			<text>{{innerTitle}}</text>
		</view>
		<view class="sub-title" v-if="subTitle">
			<view>{{subTitle}}</view>
			<view v-if="subTitle2">{{subTitle2}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			update: {
				type: Number,
				default: 1
			},
			images: {
				type: Array,
				default: function() {
					return []
				},
			},
			title: {
				type: String,
				default: '',
			},
			subTitle: {
				type: String,
				default: "上海市建筑从业人员教育平台"
			},
			subTitle2: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				innerImages: [],
				innerTitle: '',
			}
		},
		watch: {
			update() {
				this.innerTitle = this.title;
				if (!this.innerTitle && this.userInfo.realName) {
					this.innerTitle = this.userInfo.realName + ' 你好！';
				}
			}
		},
		computed: {
			userInfo() {
				return this.update && this.$utils.userInfo() || {};
			}
		},
		mounted() {
			this.innerImages = this.images;
			if (this.innerImages.length == 0) {
				this.innerImages = this.getBannerImages();
			}
			this.innerTitle = this.title;
			if (!this.innerTitle && this.userInfo.realName) {
				this.innerTitle = this.userInfo.realName + ' 你好！';
			}
		},
		methods: {
			/**
			 * 随机获取banner images
			 */
			getBannerImages() {
				let images = [1, 3, 4];
				let banners = [];
				for (let i = 0; i < 2; i++) {
					let j = Math.floor(Math.random() * images.length);
					banners.push(
					`https://shentu-pro.oss-cn-shanghai.aliyuncs.com/banner/banner${images[j]}.jpg`);
					images.splice(j, 1);
				}
				return banners;
			},
		}
	}
</script>

<style>
	.container {
		position: relative;
	}

	.sub-title {
		position: absolute;
		width: 100%;
		right: 0;
		bottom: 0rpx;
		color: white;
		font-size: 28rpx;
		text-align: right;
		padding: 10rpx;
		line-height: 40rpx;
	}

	.title {
		position: absolute;
		width: 100%;
		right: 0;
		top: 80rpx;
		color: white;
		font-size: 36rpx;
		text-align: left;
		padding-left: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
	}
</style>
